
<div id ="my_threads_container">
<?php foreach ($my_threads as $value) { ?>
  <div class="thread-res medium-12 column" style="padding-right:0;">
    <div class="medium-10 column" style="padding:0;">
      <h5><a href=""><?= ucwords($value->title) ?></a></h5>
    </div>

    <?php if(!$value->status) { ?>
      <div class="text-right medium-2 column" style="padding:.1rem;">
        <a class="unsub tiny radius button">Activate</a>
      </div>
    <?php }else{ ?>
      <div class="text-right medium-2 column" style="padding:.1rem;">
        <a class="deactivate tiny radius button">Deactivate</a>
      </div>
    <?php } ?>
    <div class="text-left medium-12 column" style="padding:0;">
      <p>By <a href=""><?=$value->username?></a> <p><small><i class="fa fa-clock-o"> <abbr class="timeago" title="<?=$value->date_created?>"></abbr></i></small></p></i></small></p></p><hr style="margin:0;">
    </div>
    <div class="medium-12 column" style="padding:.5rem 0 0 0;">
          <p><?= $value->content ?> </p>
    </div>
    <section class="medium-12 column" style="padding:.5rem 0 0 0;">
          <ul class="bhb-tags inline-list">
          <li>
            <label>
              <a class="thread-tags tiny radius button"><?=$value->category?></a>
            </label>
          </li>
    </ul>
    </section>
  </div>
<?php } ?>
</div>
  <script type="text/javascript">
      $(function(){


      function addForum(data){
          if(data.status == 'Active'){
            var template = $('#forumTpl3').html();
          }else{
            var template = $('#forumTpl2').html();
          }
          var html = Mustache.to_html(template,data);
          $(html).prependTo('#my_threads_container').hide().fadeIn('slow');
      }


          $(document).ready(function(){
              jQuery("abbr.timeago").timeago();

              var pusher = new Pusher(PUSHER_APP_KEY);
              var channel = pusher.subscribe('my-channel');
              
              channel.bind('added-forum', function(data) {
                addForum(data);
                jQuery("abbr.timeago").timeago();
              });
          }); 
      });
  </script>

  <script type="text/template" id="forumTpl2">
    <div class="thread-res medium-12 column" style="padding-right:0;">
    <div class="medium-10 column" style="padding:0;">
      <h5><a href="">{{title}}</a></h5>
    </div>


      <div class="text-right medium-2 column" style="padding:.1rem;">
        <a class="unsub tiny radius button">Activate</a>
      </div>

    <div class="text-left medium-12 column" style="padding:0;">
      <p>By <a href="">{{username}}</a> <p><small><i class="fa fa-clock-o"> <abbr class="timeago" title="{{date_created}}"></abbr></i></small></p></i></small></p></p><hr style="margin:0;">
    </div>
    <div class="medium-12 column" style="padding:.5rem 0 0 0;">
          <p>{{content}} </p>
    </div>
    <section class="medium-12 column" style="padding:.5rem 0 0 0;">
          <ul class="bhb-tags inline-list">
          <li>
            <label>
              <a class="thread-tags tiny radius button">{{category}}</a>
            </label>
          </li>
    </ul>
    </section>
  </div>

  </script>

  <script type="text/template" id="forumTpl3">
    <div class="thread-res medium-12 column" style="padding-right:0;">
    <div class="medium-10 column" style="padding:0;">
      <h5><a href="">{{title}}</a></h5>
    </div>


      <div class="text-right medium-2 column" style="padding:.1rem;">
        <a class="deactivate tiny radius button">Deactivate</a>
      </div>
      

    <div class="text-left medium-12 column" style="padding:0;">
      <p>By <a href="">{{username}}</a> <p><small><i class="fa fa-clock-o"> <abbr class="timeago" title="{{date_created}}"></abbr></i></small></p></i></small></p></p><hr style="margin:0;">
    </div>
    <div class="medium-12 column" style="padding:.5rem 0 0 0;">
          <p>{{content}} </p>
    </div>
    <section class="medium-12 column" style="padding:.5rem 0 0 0;">
          <ul class="bhb-tags inline-list">
          <li>
            <label>
              <a class="thread-tags tiny radius button">{{category}}</a>
            </label>
          </li>
    </ul>
    </section>
  </div>

  </script>